<template>
  <div v-if="ready" class="d-flex h-100 w-100 flex-column">
    <topHeader :title="$t('workShop.title')"></topHeader>

    <div class="d-flex w-100 h-90">
      <div class="d-flex w-20 h-100 flex-column">
        <div class="d-flex h-30 p-2">
          <div class="w-100 h-100 bg-custom p-2 pl-3 flex-column">
            <span class="text-custom-2 text-custom-bg">
              <span>{{ $t('workShop.module1') }}</span>
            </span>

            <div class="d-flex justify-content-between">
              <div class="w-15">
                <p class="text-white-50">{{ $t('workShop.filedname1') }}</p>
              </div>
              <div class="w-28" style="flex:auto;">
                <p class="text-white-50 text-center">{{ $t('workShop.filedname2') }}</p>
              </div>
              <div class="w-20">
                <p class="text-white text-center">
                  {{ $t('workShop.filedname3') }}
                </p>
              </div>
            </div>


            <Vue3SeamlessScroll :list="upcoming" class="seamless-scroll" :step=".3">
              <div v-for="(log, index) in upcoming" :key="'upcoming' + index" class="exception-list--item">
                <div class="d-flex justify-content-between">
                  <div class="w-15">
                    <p class="text-white-50 ">
                      {{ index + 1 }}
                    </p>
                  </div>
                  <div class="w-28" style="flex:auto">
                    <p class="text-white-50 text-center">
                      {{ '000010-0' + formatter(index + 1) + '-0000' }}
                    </p>
                  </div>
                  <div class="w-20">
                    <p class="text-white text-center">{{ log.quantity }}</p>
                  </div>
                </div>
              </div>
            </Vue3SeamlessScroll>
          </div>
        </div>

        <div class="d-flex h-40 p-2">
          <div class="w-100 h-100 bg-custom p-2 pl-3 flex-column">
            <span class="text-custom-2 text-custom-bg">
              <span>{{ $t('workShop.module2') }}</span>
            </span>

            <div class="d-flex justify-content-between">
              <div class="w-28 text-left" style="flex:auto">
                <p class="text-white-50 text-center">{{ $t('workShop.filedname1') }}</p>
              </div>
              <div class="w-25">
                <p class="text-white text-center">{{ $t('workShop.filedname4') }}</p>
              </div>
              <div class="w-25">
                <p class="text-white text-center">
                  {{ $t('workShop.filedname3') }}
                </p>
              </div>
            </div>
            <Vue3SeamlessScroll :list="workOrderList" class="seamless-scroll" :step=".3">
              <div v-for="(log, index) in workOrderList" :key="'workOrderList' + index" class="exception-list--item">
                <div class="d-flex justify-content-between">
                  <div class="w-15" style="flex:auto">
                    <p class="text-white-50 text-center">
                      {{ log.id }}
                    </p>
                  </div>
                  <div class="w-28">
                    <p class="text-white-50 text-center">
                      {{ log.equipmentName }}
                    </p>
                  </div>
                  <div class="w-25">
                    <p class="text-white text-center">{{ log.qty }}</p>
                  </div>
                </div>
              </div>
            </Vue3SeamlessScroll>
          </div>
        </div>

        <div class="d-flex  h-30 p-2">
          <div class="w-100 h-100 bg-custom p-2 pl-3 flex-column">
            <span class="text-custom-2 text-custom-bg">
              <span>{{ $t('workShop.module3') }}</span>
            </span>
            <LineChart :width="getScreenWidth / 6" :height="getScreenWidth / 6" v-if="lineChartReady"
              :dataX="lineChart3Labels" :dataY="lineChart3Values" :fontSize="14" />
          </div>
        </div>
      </div>




      <div class="d-flex flex-column w-60  justify-content-between align-items-center">
        <div class="d-flex w-100 h-70" style="position:relative" id="parentDiagramDiv">
          <div id="myDiagramDiv" class="h-100 w-90"
            style="position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); ">
            <canvas tabindex="0" width="1808" height="1196" style=" position:
                            absolute; top: 0px; left: 0px; z-index: 2; user-select: none; width: 904px; height: 598px;
            ">
            </canvas>
          </div>
          <!-- <div class="h-100 w-90 flex-row justify-content-center">
            <div class="back-myDiagramDiv" style="position:relative">
              <div v-for="(item,index) in DataArray" :key="index" class="pop-wrap flex-row justify-content-center align-items-center" :style="{left:item.coordinate[0]+'px',top:item.coordinate[1]+'px',width:item.width+'px',height:item.height+'px'}">
                <div class="pop-content flex-column justify-content-center ">
                  <div>名称：{{item.name}}</div>
                  <div>状态：</div>
                </div>
              </div>
            </div>
          </div> -->
          <div class="d-flex w-10 h-100 flex-column justify-content-center align-items-center"
            style="position: absolute;right:0">
            <div class="d-flex status-desc--item  align-items-center my-2" v-for="(item, index) in machineStatus"
              :key="index">
              <div class="status-desc--color" :style="{ backgroundColor: `rgba(${machineColor[item.state]},1)` }"> </div>
              <div class="status-desc--val">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="d-flex w-100 h-30 p-2">
          <div class="w-100 h-100 bg-custom p-2 flex-row">
            <div class="d-flex w-25  h-100 border-custom-right flex-column justify-content-center">
              <span class="text-custom-2 text-custom-bg">
                <span>{{ $t('workShop.module4') }}</span>
              </span>

              <LineChart :width="getScreenWidth / 7" :machine="true" :height="getScreenWidth / 12" v-if="lineChartReady"
                :dataX="lineChartLabels" :dataY="lineChartValues" :fontSize="12" />
            </div>

            <div class="d-flex w-25 h-100 border-custom-right flex-column justify-content-center">
              <span class="text-custom-2 text-custom-bg">
                <span>{{ $t('workShop.module5') }}</span>
              </span>
              <BarCharts :name="'containers1'" :width="getScreenWidth / 7" :height="getScreenWidth / 12"
                v-if="oeeChartReady" :dataX="oeeLabels" :dataY="oeeValues" :max=100 :fontSize="12"></BarCharts>
            </div>




            <div class="d-flex w-25 h-100 flex-column border-custom-right justify-content-center">
              <span class="text-custom-2 text-custom-bg">
                <span>{{ $t('workShop.module6') }}</span>
              </span>

              <BarCharts :name="'containers2'" :width="getScreenWidth / 7" :height="getScreenWidth / 12"
                v-if="barAndLineChartReady" :dataX="lineChart2Labels" :dataY="barChart2Values" :max=100 :fontSize="12">
              </BarCharts>
            </div>

            <div class="d-flex w-25 h-100 flex-column justify-content-center mr-1" style="margin-right:10px">
              <span class="text-custom-2 text-custom-bg">
                <span>{{ $t('workShop.module7') }}</span>
              </span>
              <BarCharts :name="'containers2'" :width="getScreenWidth / 7" :height="getScreenWidth / 12"
                v-if="barAndLineChartReady" :dataX="lineChart2Labels" :dataY="barChart2Values" :max=100 :fontSize="12">
              </BarCharts>
            </div>
          </div>
        </div>

      </div>

      <div class="d-flex w-20 h-100 flex-column">
        <div class="d-flex h-35 p-2 flex-column ">
          <div class="h-99 bg-custom p-2 pl-3 flex-column exception-list">
            <span class="text-custom-2 text-custom-bg">
              <span>{{ $t('workShop.module8') }}</span>
            </span>

            <div class="d-flex justify-content-between">
              <p class="text-white fx-1 text-center">{{ $t('workShop.filedname4') }}</p>
              <p class="text-white fx-1 text-center">{{ $t('workShop.filedname6') }}</p>
              <p class="text-white fx-1 text-center">{{ $t('workShop.filedname7') }}</p>
            </div>
            <div class="text-white text-center">暂无数据</div>
          </div>
        </div>

        <div class="d-flex h-35 p-2 flex-column ">
          <div class="h-100 bg-custom p-2 pl-3 flex-column exception-list">
            <span class="text-custom-2 text-custom-bg">
              <span>{{ $t('workShop.module9') }}</span>
            </span>
            <div class="d-flex w-100  justify-content-center scrapbar_progress">
              <Progress :width="(getScreenWidth / 13)" :height="(getScreenWidth / 13)" :target-value="100"
                color="rgb(0, 123, 255)"></Progress>
            </div>
            <div class="d-flex flex-column px-2 pb-1 justify-content-center align-items-center" style="margin:0 auto;">
              <div class="d-flex text-custom-2 align-items-center"><span class="color-desc"
                  style="background-color: #007bff;margin-right:5px"></span>{{ $t('workShop.productnum') }}：{{
                    ScrapandBadData[1] }}
              </div>

              <div class="d-flex text-custom-2 align-items-center" style="width:100%">
                <span>
                  <span class="color-desc" style="background-color: rgba(251, 114, 147, .3);margin-right:5px"></span>{{
                    $t('workShop.badnum') }}：{{
    ScrapandBadData[0] }}</span><span style="flex:auto"></span>
              </div>

            </div>
          </div>
        </div>


        <div class="d-flex w-100 h-30 p-2">
          <div class="w-100 h-100 bg-custom p-2 pl-3 flex-column">
            <span class="text-custom-2 text-custom-bg">
              <span>{{ $t('workShop.module10') }}</span>
            </span>


            <div class="d-flex flex-column justify-content-center ">
              <div class="d-flex w-100  justify-content-center oee_progress mt-2">
                <Progress :width="(getScreenWidth / 13)" :height="(getScreenWidth / 13)" :target-value="90"
                  color="#34b9f2"></Progress>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
    <bottomFooter></bottomFooter>
  </div>
</template>
<script setup lang="ts">
import go from 'gojs'
import bg from '@/assets/img/workshop.png'
import tuopan from '@/assets/img/tuopan1.png'
import bottomFooter from '@/components/bottomFooter/index.vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { workShopData, workOrder } from '@/service/api/index'
const Progress = defineAsyncComponent(() => import('@/components/circularProgress/index.vue'))
const topHeader = defineAsyncComponent(() => import('@/components/topHeader/index.vue'))
const BarCharts = defineAsyncComponent(() => import('@/components/BarChart/index.vue'))
const LineChart = defineAsyncComponent(() => import('@/components/LineChart/index.vue'))
const { proxy } = getCurrentInstance() as any
const ready = ref(true)
const upcoming = ref([] as Array<any>)
const production = ref([] as Array<any>)
const machines = ref([] as Array<any>)
const lineChartLabels = ref([] as Array<any>)
const lineChartValues = ref([] as Array<any>)
const lineChartReady = ref(true)
const lineChart2Labels = ref([] as Array<any>)
const lineChart2Values = ref([] as Array<any>)
const barChart2Labels = ref([] as Array<any>)
const barChart2Values = ref([] as Array<any>)
const barAndLineChartReady = ref(true)
const lineChart3Labels = ref([] as Array<any>)
const lineChart3Values = ref([] as Array<any>)
const barChart3Labels = ref([] as Array<any>)
const barChart3Values = ref([] as Array<any>)
const barAndLineChart3Ready = ref(true)
const oeeLabels = ref([] as Array<any>)
const oeeValues = ref([] as Array<any>)
const oeeChartReady = ref(true)
const ScrapandBadData = ref([] as Array<any>)
const percentage = ref(0)
const timerloop: any = ref(null)
const workOrderList = ref([] as Array<any>)
const DataArray = ref([
  { name: "x光钻靶机", key: "钻靶机", src: "60x90", loc: new go.Point(145, 60), coordinate: [145, 60], width: 200, height: 175, color: 'transparent', flip: go.GraphObject.FlipVertical, status: '' },
  { name: "三菱镭射钻孔机", key: "三菱", src: "80x50", loc: new go.Point(416, 60), coordinate: [416, 60], width: 173, height: 280, color: 'transparent', flip: go.GraphObject.none, status: '' },
  { name: "DI曝光机", key: "DI", src: "80x50", loc: new go.Point(60, 280), coordinate: [60, 280], width: 385, height: 205, color: 'transparent', flip: go.GraphObject.none, status: '' },
])


//生产 Production = 1 待机 Free = 2故障 Trouble = 3保养 OffLine = 4停机 Stop = 5
enum machineColor {
  '64, 157, 104' = 1,
  '40,84,153' = 2,
  '205,0,0' = 3,
  '194,80,208' = 4,
  '95,95,93' = 5
}
enum machineText {
  '生产' = 1,
  '待机' = 2,
  '故障' = 3,
  '保养' = 4,
  '停机' = 5
}
const machineStatus = ref([{ name: '生产', state: 1 }, { name: '待机', state: 2 }, { name: '故障', state: 3 }, { name: '保养', state: 4 }, { name: '停机', state: 5 }])
const formatter = (i: any) => {
  return proxy.$common.formatter(i)
}
const getScreenWidth = computed(() => {
  return proxy.$common.getScreenWidth()
})
const gomake = ref(null)
const timer: any = reactive({
  timeData: 0,
  timerData: null,
  intervalData: 6000,
  num: 0
})
const workOrdertimer: any = reactive({
  timeData: 0,
  timerData: null,
  intervalData: 180000,
  num: 0
})
const realTimeFresh = async () => {
  let currTimeData = new Date().getTime()
  if ((currTimeData - timer.timeData) > timer.intervalData || timer.timeData === 0) {
    timer.timeData = new Date().getTime()
    getworkShop()
  }
  timer.timerData = requestAnimationFrame(realTimeFresh)
}
const getWorkOrderFresh = async () => {
  let currTimeData = new Date().getTime()
  if ((currTimeData - workOrdertimer.timeData) > workOrdertimer.intervalData || workOrdertimer.timeData === 0) {
    workOrdertimer.timeData = new Date().getTime()
    getWorkOrder()
  }
  workOrdertimer.timerData = requestAnimationFrame(realTimeFresh)
}
onMounted(async () => {
  getWorkOrderFresh()
  getData()
  realTimeFresh()
  ScrapandBadData.value = [proxy.$common.random(0, 5), proxy.$common.random(100, 400)]

  let num = ScrapandBadData.value[0] + ScrapandBadData.value[1]
  let percent = (ScrapandBadData.value[1] / num) * 100;
  percentage.value = percent
  setTimeout(() => { ready.value = true }, 1000);
})
const getExpectedWorkorder = () => {
  let machine_arr = [];
  let status_arr = ["Running", "Paused", "Finished"]
  for (let i = 1; i <= 15; i++) {
    machine_arr.push({ lot: `CJOB558:P${proxy.$common.formatter(i)}`, machine: `GTW6-${proxy.$common.formatter(i)}`, produced: proxy.$common.random(0, 280), quantity: 280, status: status_arr[proxy.$common.random(0, 2)] });
  }
  return { data: machine_arr }
}
const filterEmptyLot = (lots: Array<any>) => {
  let result = [];
  for (let i = 0; i < lots.length; i++) {
    if (lots[i]["lot"] !== "") {
      result.push(lots[i]);
    }
  }
  return result;
}
const filterProductionUpcomingLot = (lots: Array<any>) => {
  let production = [];
  let upcoming = [];

  for (let i = 0; i < lots.length; i++) {
    if (lots[i]["status"] === "Running" || lots[i]["status"] === "Paused") {
      production.push(lots[i]);
    } else if (lots[i]["status"] !== "Finished" || lots[i]["status"] !== "Running" || lots[i]["status"] !== "Paused") {
      upcoming.push(lots[i]);
    }
  }

  return [production, upcoming];
}

const getrandomMachineData = () => {
  let machine_arr = [];
  let status_arr = ['Stopped', 'Maintenance', 'Idle']
  for (let i = 1; i <= 20; i++) {
    machine_arr.push({ machine: `GTW6-${proxy.$common.formatter(i)}`, dur: proxy.$common.random(0, 300), status: status_arr[proxy.$common.random(0, 2)] });
  }
  return { data: machine_arr }
}
const filterMachinesStatus = (machines: Array<any>) => {
  let result = [];

  for (let i = 0; i < machines.length; i++) {
    if (machines[i]["status"] === "Stopped" || machines[i]["status"] === "Idle" || machines[i]["status"] === "Maintenance") {
      result.push(machines[i]);
    }
  }

  return result;
}

const generateLineChartData = () => {
  let labels = [];
  let values = [];

  let previous = 10;

  for (let i = 0; i < DataArray.value.length; i++) {
    previous = proxy.$common.random(previous, previous + 15);
    labels.push(DataArray.value[i].name);
    values.push(previous);
  }


  return [labels, values.reverse()];
}
const generateLineChartData2 = () => {
  let labels = [];
  let values = [];

  for (let i = 0; i < DataArray.value.length; i++) {
    labels.push(DataArray.value[i].name);
    values.push(proxy.$common.random(20, 80));
  }

  return [labels, values];
}
const generateLineChartData4 = () => {
  let labels = [];
  let values = [];

  for (let i = 0; i < DataArray.value.length; i++) {
    labels.push(DataArray.value[i].name);
    values.push(proxy.$common.random(0, 100));
  }

  return [labels, values];
}
const generateBarChartData2 = () => {
  let labels = [];
  let values = [];

  let previous = 80;

  for (let i = 1; i <= 8; i++) {
    previous = proxy.$common.random(0, 90);
    values.push(previous);
  }

  labels = generateRandomMachineName(8);

  return [
    labels,
    values.reverse().sort(function (a, b) {
      return b - a;
    }),
  ];
}
const generateLineChartData3 = () => {
  let labels: any = [];
  let values = [];

  var now = new Date();
  var day: number = now.getDay();
  for (let i = 0; i <= day; i++) {
    values.push(proxy.$common.random(500, 1000));
  }

  return [labels, values];
}
const generateBarChartData3 = () => {
  let labels = [];
  let values = [];

  for (let i = 19; i <= 25; i++) {
    labels.push(i);
    values.push(proxy.$common.random(3000, 6000));
  }

  return [labels, values];
}
const generateRandomMachineName = (max: number) => {
  let list = [];

  for (let i = 1; i <= 20; i++) {
    list.push("#" + i);
  }

  shuffleArray(list);

  return list.slice(0, max);
}
const shuffleArray = (array: Array<any>) => {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}
const getData = () => {
  let res = getExpectedWorkorder()

  let lots = filterEmptyLot(res.data);

  let temp = filterProductionUpcomingLot(lots);

  production.value = temp[0];
  upcoming.value = temp[1];

  let res2 = getrandomMachineData();

  machines.value = filterMachinesStatus(res2.data);


  let temp3 = generateLineChartData();
  console.log(temp3)
  lineChartLabels.value = temp3[0];
  lineChartValues.value = temp3[1];
  lineChartReady.value = true;

  let temp4 = generateLineChartData2();
  lineChart2Labels.value = temp4[0];
  lineChart2Values.value = temp4[1];

  let temp5 = generateBarChartData2();
  barChart2Labels.value = temp5[0];
  barChart2Values.value = temp5[1];
  barAndLineChartReady.value = true;



  let temp6 = generateLineChartData3();
  lineChart3Labels.value = ['日', '一', '二', '三', '四', '五', '六'];
  lineChart3Values.value = temp6[1];

  let temp7 = generateBarChartData3();
  barChart3Labels.value = temp7[0];
  barChart3Values.value = temp7[1];
  barAndLineChart3Ready.value = true;

  let temp8 = generateLineChartData4()
  oeeLabels.value = temp8[0]
  oeeValues.value = temp8[1]
  oeeChartReady.value = true;

  // code to random & update 维保统计 pie chart
  let data1 = Math.floor(Math.random() * (60 - 10 + 1)) + 10;
  let data2 = 100 - data1;

  proxy.$common.randomPieChartData1 = data1;
  proxy.$common.randomPieChartData2 = data2;

}

let myDiagram: any = null;
const init = () => {

  var $ = go.GraphObject.make;
  myDiagram = $(go.Diagram, "myDiagramDiv", {
    "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, // 开启鼠标滚轮缩放
    initialContentAlignment: go.Spot.Center, //画布位置
    isReadOnly: true, //只读
    // scale: 1.4 * (getScreenWidth.value/1920), //根据屏幕设置初始视图大小比例
    "toolManager.hoverDelay": 100 //
  });
  //添加并设置背景
  myDiagram.add(
    $(go.Part,
      {
        width: 717,
        height: 596,
        layerName: "Background",
        position: new go.Point(0, 0),
        selectable: false,
        pickable: false,
        scale: 0.9
      },
      $(go.Picture, { source: bg })
    )
  );
  gomake.value = $
  setAttr($)
};
const setAttr = ($: any) => {
  // 每台机的模板
  myDiagram.nodeTemplate = $(
    go.Node,
    new go.Binding("location", "loc"),
    $(go.Panel, "Spot",
      $(go.Shape, "Rectangle", new go.Binding("width", "width"), new go.Binding("height", "height"),
        { name: 'main', fill: null, stroke: null }),
      $(go.Panel, "Vertical",
        { background: 'rgba(0,0,0,0.5)', padding: 10 },
        $(go.TextBlock, { stroke: 'white', font: '16px sans-serif' },
          new go.Binding("text", "name", function (val: string) {
            return "名称：" + val
          })
        ),
        $(go.Panel, "Horizontal",
          { alignment: go.Spot.Left},
          $(go.TextBlock, { stroke: 'white', font: '16px sans-serif' }, new go.Binding("text", "status", function (val: string) {
            return val ? "状态：" + val : ''
          })),
          $(go.Shape, "Ellipse", new go.Binding("fill", "color"), { fill: 'transparent', width: 20, height: 20, stroke: 'transparent' },
          )

        )
      )
    ),
  );

  const simpletemplate =
    $(go.Part,
      new go.Binding("position", "loc"),
      $(go.Picture, { source: tuopan, width: 50, height: 40, }),
      $(go.TextBlock, new go.Binding("stroke", "stroke"), { font: '16px sans-serif', verticalAlignment: go.Spot.Center, textAlign: "center", width: 50, height: 40 }, new go.Binding("text", "status", function (val: string) {
        return val
      })
      )
    )

  //不同分类Map
  const templmap = new go.Map();
  templmap.add("simple", simpletemplate);
  templmap.add("", myDiagram.nodeTemplate);

  myDiagram.nodeTemplateMap = templmap;
  myDiagram.model.nodeDataArray = DataArray.value

  //机台状态颜色动画
  function animationStatus() {
    let model = myDiagram.model;
    let arr = model.nodeDataArray.filter((item: any) => !(item.category == 'simple'));;
    for (let i = 0; i < arr.length; i++) {
      let data = arr[i];
      let DEFAULTCOLOR = `rgba(${data.color},1)`
      let color = data.color == DEFAULTCOLOR ? `rgba(${data.color},.8)` : DEFAULTCOLOR
      if (data.color.includes('rgba')) {
        color = data.color.includes(',1)') ? data.color.replace(',1)', ',.8)') : data.color.replace(',.8)', ',1)')
      } else {
        color = 'rgba(225,225,225,0)'
      }
      model.setDataProperty(data, "color", color);
    }
  }

  function loop() {
    timerloop.value = setTimeout(function () {
      clearTimeout(timerloop.value)
      animationStatus();
      loop()
    }, 1000);
  }
  loop()
}
const getworkShop = async () => {
  if (!gomake.value) {
    init()
  }
  let res: any = await workShopData()

  res && res.result.map((item: any) => {
    DataArray.value.map((data) => {
      if (item.name.includes(data.key)) {
        data.name = item.name
        data.color = `rgba(${machineColor[item.state]},1)`
        data.status = machineText[item.state]
      }
    })
  })
  if (gomake.value) {
    setAttr(gomake.value)
  } else {
    init()
  }
}
const getWorkOrder = async () => {
  let res2: any = await workOrder({ page: 1, pageSize: 50 })

  if (res2 && res2.result) workOrderList.value = res2.result.items
}
onUnmounted(() => {
  cancelAnimationFrame(timer.timerData)
  cancelAnimationFrame(workOrdertimer.timerData)
})
</script>
<style scoped>
#app {
  width: 1920px;
  height: 1080px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
}

.h-90 {
  height: 89% !important
}
</style>
<style>
.machine-left {
  width: 513px !important;
}

#myDiagramDiv ::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

.pop-wrap {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  /* background-image: url("@/assets/img/poup.png"); */
}

.pop-content {
  color: #FFFFFF;
  padding: .5rem 1rem;
  box-shadow: inset 0 0 1rem #0b6f6c,
    0 0 .5rem #0b6f6c;
  background-color: rgb(0, 0, 0, .1);
  border-radius: .5rem;
}

.IMS_machine_list {
  width: 680px;
  width: 486px;
  position: absolute;
  top: 31px;
  justify-content: space-between;
  color: #FFFFFF;
}

.shade {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 6vh .5vh #666;
  height: 27px;
  width: 32px;
  z-index: -1;
}

.IMS_machine_item {
  width: 65px;
  height: 70px;
  position: relative;
}

.IMS_machine_item:last-child {
  margin-right: 0;
}

.IMS_machine_front {
  width: 94px;
  height: 52%;
}

.IMS_machine_reverse {
  width: 52px;
  height: 48%;
}

.IMS_machine_front,
.IMS_machine_reverse {
  position: relative;
  z-index: 11;
}

.IMS_machine_front::after {
  position: absolute;
  transform: translate(-30%, -50%);
  content: '';
  left: 50%;
  top: 30%;
  z-index: 111;
  height: 27px;
  width: 32px;

}

.status-desc--item {
  margin-right: 9px;
}

.status-desc--color {
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 10px;
}

.status-desc--val {
  color: #fff;
}


.footer {
  position: fixed;
  bottom: 0;
  text-align: right;
  color: #ffffff;
  background-color: transparent;
  width: 100%;
  z-index: 111;
  font-size: 12px;
  padding: 0 20px;
}

.color-desc {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

.text-custom-2 {
  color: #ffffff;
}



div .exception-list--item:last-child p {
  margin-bottom: 0 !important;
}

.exception-list--item {
  font-size: 0.8rem;
}

.exception-list--item p {
  margin-bottom: 0.5rem !important;
}

.no-data--text {
  color: white;
  text-align: center;
}
</style>
<style scoped>
.text-white-50 {
  color: #FFFFFF !important;
}

.d-flex.flex-row.status-desc--item.align-items-center {
  font-size: 16px !important;
}

::-webkit-scrollbar {
  display: none;
}
</style>